<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <tab  v-model="index" prevent-default @on-before-index-change="switchTabItem" :line-width="2">
      <tab-item selected :badge-label="count.level_1">一级团队</tab-item>
      <tab-item :badge-label="count.level_2">二级团队</tab-item>
    </tab>
    <group :gutter="0" v-if="list !== null && list.length > 0">
      <cell v-for="(item, index) in list" :key="index" :title="item.name" :value="item.created_at">
       
        <img v-if="item.avatar" slot="icon" width="40" style="display:block;margin-right:5px;" :src="item.avatar">
        <img v-else slot="icon" width="40" style="display:block;margin-right:5px;" src="">
      </cell>
        
      </cell>
    </group>
    <empty tips="亲，暂时没有相关记录" icon="icon-tuandui" v-if="list !== null && list.length === 0"></empty>
    <divider v-if="list !== null && list.length > 20" style="margin-top:20px;">显示最新30条记录</divider>
  </view-box>
</template>
<script>
  import { ViewBox, Tab, TabItem, Countup, Group, Cell, Divider } from 'vux'
  import Empty from '@/views/components/Empty'
  export default {
    data () {
      return {
        list: null,
        count: {
          level_1: 0,
          level_2: 0
        },
        index: 0
      }
    },
    computed: {
      userInfo () {
        return this.$store.getters.userInfo
      }
    },
    components: {
      ViewBox,
      Tab,
      TabItem,
      Empty,
      Countup,
      Group,
      Cell,
      Divider
    },
    mounted () {
      this._getData()
      this._getCount()
    },
    methods: {
      _getData () {
        this.list = null
        this.$vux.loading.show()
        let level = this.index + 1
        this.$http.get('/distributions?level=' + level).then((response) => {
          this.$vux.loading.hide()
          this.list = response.data
        }).catch((error) => {
          this.$vux.loading.hide()
          console.log(error)
        })
      },
      _getCount () {
        this.$http.get('/distributions/groupCount').then((response) => {
          this.count = response.data
        })
      },
      switchTabItem (index) {
        this.index = index
        this._getData()
      }
    }
  }
</script>
<style scoped lang="less">
  .overwrite-title {
    margin-top: 5px;
  }
  .number {
    font-size: 35px;
  }
</style>